<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>KITIM</title>
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./lib/layer/theme/default/layer.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="kitim">
    <div id="IM-header">
      <div class="kitim-header">
        <div class="kitim-header-profile">
          <img src="//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg">
        </div>
        <div class="kitim-header-tools">
          <div class="kitim-item kitim-this" kitim-event="chat" title="消息">
            <i class="fa fa-comments" aria-hidden="true"></i>
          </div>
          <div class="kitim-item" kitim-event="contact" title="联系人">
            <i class="fa fa-users" aria-hidden="true"></i>
          </div>
          <div class="kitim-item" kitim-event="files" title="文件中心">
            <i class="fa fa-file-text" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div id="IM-main">
      <div class="kitim-main">
        <div class="kitim-main-left">
          <!-- 消息列表 -->
          <div class="kitim-chat kitim-show">
            <ul class="kitim-chat-list">
              <li>
                <div class="kitim-profile">
                  <img src="//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg">
                </div>
                <div class="kitim-name">
                  <span title="Candyh">Candyh</span>
                </div>
                <i class="fa fa-times-circle" aria-hidden="true"></i>
              </li>
              <li>
                <div class="kitim-profile">
                  <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
                </div>
                <div class="kitim-name">
                  <span title="江小白">江小白</span>
                </div>
                <i class="fa fa-times-circle" aria-hidden="true"></i>
              </li>
              <li>
                <div class="kitim-profile">
                  <img src="//tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">
                </div>
                <div class="kitim-name">
                  <span title="马大云">马大云</span>
                </div>
                <i class="fa fa-times-circle" aria-hidden="true"></i>
              </li>
            </ul>
          </div>
          <!-- 联系人列表 -->
          <div class="kitim-contact">
            <ul class="kitim-contact-tabs">
              <li class="kitim-this" kitim-event="friends">
                <span title="好友">好友</span>
              </li>
              <li kitim-event="groups">
                <span title="群组">群组</span>
              </li>
              <li kitim-event="discuss">
                <span title="讨论组">讨论组</span>
              </li>
            </ul>
            <div class="kitim-contact-friends kitim-show">
              <ul class="kitim-contact-group">
                <li class="kitim-contact-item">
                  <i class="fa fa-caret-right" aria-hidden="true"></i>
                  <span class="kitim-contact-name">我的好友</span>
                  <ul class="kitim-contact-list">
                    <li>
                      <div class="kitim-profile">
                        <img src="//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg">
                      </div>
                      <div class="kitim-name">
                        <span title="Candyh">Candyh</span>
                      </div>
                    </li>
                    <li>
                      <div class="kitim-profile">
                        <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
                      </div>
                      <div class="kitim-name">
                        <span title="江小白">江小白</span>
                      </div>
                    </li>
                    <li>
                      <div class="kitim-profile">
                        <img src="//tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">
                      </div>
                      <div class="kitim-name">
                        <span title="马大云">马大云</span>
                      </div>
                    </li>
                  </ul>
                </li>
                <li class="kitim-contact-item kitim-show">
                  <i class="fa fa-caret-down" aria-hidden="true"></i>
                  <span class="kitim-contact-name">大神们</span>
                  <ul class="kitim-contact-list">
                    <li>
                      <div class="kitim-profile">
                        <img src="//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg">
                      </div>
                      <div class="kitim-name">
                        <span title="Candyh">Candyh</span>
                      </div>
                    </li>
                    <li>
                      <div class="kitim-profile">
                        <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
                      </div>
                      <div class="kitim-name">
                        <span title="江小白">江小白</span>
                      </div>
                    </li>
                    <li>
                      <div class="kitim-profile">
                        <img src="//tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">
                      </div>
                      <div class="kitim-name">
                        <span title="马大云">马大云</span>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="kitim-contact-groups">
              <ul class="kitim-contact-list">
                <li>
                  <div class="kitim-profile">
                    <img src="//tva1.sinaimg.cn/crop.0.0.200.200.50/006q8Q6bjw8f20zsdem2mj305k05kdfw.jpg">
                  </div>
                  <div class="kitim-name">
                    <span title="KITADMIN">KITADMIN</span>
                  </div>
                </li>
                <li>
                  <div class="kitim-profile">
                    <img src="//tva2.sinaimg.cn/crop.0.0.199.199.180/005Zseqhjw1eplix1brxxj305k05kjrf.jpg">
                  </div>
                  <div class="kitim-name">
                    <span title="KITADMIN 群二">KITADMIN 群二</span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="kitim-contact-discuss">
              <ul class="kitim-contact-list">
                <li>
                  <div class="kitim-profile">
                    <img src="//tva1.sinaimg.cn/crop.0.0.200.200.50/006q8Q6bjw8f20zsdem2mj305k05kdfw.jpg">
                  </div>
                  <div class="kitim-name">
                    <span title="开黑小分队">开黑小分队</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 文件中心 -->
          <div class="kitim-files">
            文件中心
          </div>
        </div>
        <div class="kitim-main-content">
          <!-- 消息 -->
          <div class="kitim-chat kitim-show">
            <!-- 消息盒子 -->
            <div class="kitim-chat-box">
              <div class="kitim-chat-messages">
                <ul>
                  <li class="kit-chat-moremsg">
                    <a href="javascript:;" title="查看更多消息">
                      <i class="fa fa-clock-o" aria-hidden="true"></i> 查看更多消息
                    </a>
                  </li>
                  <li class="kit-chat-systemtips">
                    <span>你们已经成为好友啦，赶紧开始聊天吧..</span>
                  </li>
                  <li class="kitim-item">
                    <a href="javascript:;">
                      <img src="//tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">
                    </a>
                    <div class="kitim-chat-msgbox">
                      <span>马大云</span>
                      <div class="kitim-chat-msg">
                        <p>你好吖，很高兴认识你。</p>
                      </div>
                    </div>
                  </li>
                  <li class="kit-chat-systemtips">
                    <span>2018/4/3 星期二 18:17:00</span>
                  </li>
                  <li class="kitim-item kitim-chat-right">
                    <a href="javascript:;">
                      <img src="//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg">
                    </a>
                    <div class="kitim-chat-msgbox">
                      <span>Candyh</span>
                      <div class="kitim-chat-msg">
                        <p>你有我的照片吗？ </p>
                      </div>
                    </div>
                  </li>
                  <li class="kitim-item">
                    <a href="javascript:;">
                      <img src="//tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">
                    </a>
                    <div class="kitim-chat-msgbox">
                      <span>马大云</span>
                      <div class="kitim-chat-msg">
                        <p>您好，我现在有事不在，一会再和您联系。 </p>
                      </div>
                    </div>
                  </li>
                  <li class="kitim-item">
                    <a href="javascript:;">
                      <img src="//tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">
                    </a>
                    <div class="kitim-chat-msgbox">
                      <span>马大云</span>
                      <div class="kitim-chat-msg">
                        <p>我来啦，这是你要的照片。
                          <img src="//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg">
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="kitim-item kitim-chat-right">
                    <a href="javascript:;">
                      <img src="//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg">
                    </a>
                    <div class="kitim-chat-msgbox">
                      <span>【群主】广州-Van-.NET</span>
                      <div class="kitim-chat-msg">
                        <p>
                          hhhh
                          <img src="http://img.zcool.cn/community/010f87596f13e6a8012193a363df45.jpg@1280w_1l_2o_100sh.jpg">
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 工具框 -->
            <div class="kitim-chat-tools">
              <ul>
                <li>
                  <a href="javascript:;" title="选择表情">
                    <i class="fa fa-smile-o" aria-hidden="true"></i>
                  </a>
                </li>
                <li>
                  <a href="javascript:;" title="发送图片">
                    <i class="fa fa-photo" aria-hidden="true"></i>
                  </a>
                </li>
                <li>
                  <a href="javascript:;" title="发送文件">
                    <i class="fa fa-folder-o" aria-hidden="true"></i>
                  </a>
                </li>
                <li>
                  <a href="javascript:;" title="显示消息记录">
                    <i class="fa fa-history" aria-hidden="true"></i>
                  </a>
                </li>
                <li>
                  <a href="javascript:;" title="关于KITIM">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                  </a>
                </li>
              </ul>
            </div>
            <!-- 输入框 -->
            <div class="kitim-chat-footer">
              <div class="kitim-chat-input">
                <textarea></textarea>
              </div>
              <div class="kitim-chat-btn">
                <button type="button">发送(s)</button>
              </div>
            </div>
          </div>
          <!-- 联系人 -->
          <div class="kitim-contact">
            <div class="kitim-contact-friends kitim-show">
              <div class="kitim-contact-empty">
                <p>主动一点，然后你会发现世界很大(好友).</p>
              </div>
            </div>
            <div class="kitim-contact-groups">
              <div class="kitim-contact-empty">
                <p>主动一点，然后你会发现世界很大(群组).</p>
              </div>
            </div>
            <div class="kitim-contact-discuss">
              <div class="kitim-contact-empty">
                <p>主动一点，然后你会发现世界很大(讨论组).</p>
              </div>
            </div>
          </div>
          <!-- 文件中心 -->
          <div class="kitim-files">
            文件中心
          </div>
        </div>
        <div class="kitim-main-right"></div>
      </div>
    </div>
  </div>
  <script src="./lib/require.min.js"></script>
  <script>
    require.config({
      paths: {
        kitim: 'js/dist/kitim',
        layer: 'lib/layer/layer',
        jquery: 'lib/jquery.min',
        lodash: 'lib/lodash.min',
        axios: 'lib/axios.min'
      }
    });
    require(['jquery', 'kitim', 'layer'], function ($, kitim, layer) {
      var im = kitim.createClass;
      // console.log(im);
      // im.config({
      //   hello: function() {
      //     console.log('hello')
      //   },
      //   type: 'get'
      // });

      //阻止事件冒泡
      function stope(thisEvent) {
        thisEvent = thisEvent || win.event;
        try {
          thisEvent.stopPropagation()
        } catch (e) {
          thisEvent.cancelBubble = true;
        }
      };
      // kitim 容器改变事件
      function winChange(layero) {
        console.log(layero);
        var that = layero[0];
        var width = that.offsetWidth;
        var height = that.offsetHeight;
        var _left = layero.find('.kitim-main-left');
        var _chatbox = layero.find('.kitim-chat-box');
        var _content = layero.find('.layui-layer-content');
        if (_content.length > 0) {
          _content.height(height - 56);
        }
        _left.height(height - 56);
        _chatbox.height(height - 217);
      }
      layer.open({
        title: $('#IM-header').html(),
        skin: 'kitim',
        type: 1,
        area: ['800px', '600px'],
        content: $('#IM-main').html(),
        shade: false,
        maxmin: true,
        resizing: function (layero) {
          winChange(layero);
        },
        success: function (layero, index) {
          winChange(layero);

          layer.photos({
            photos: '.kitim-chat-msg'
          });

          $('.kitim-contact-group').find('.kitim-contact-item').each(function () {
            var _that = $(this);
            _that.on('click', function () {
              console.log(_that);
              if (_that.hasClass('kitim-show')) {
                _that.removeClass('kitim-show');
                _that.find('i.fa').removeClass('fa-caret-down').addClass('fa-caret-right');
              } else {
                _that.addClass('kitim-show');
                _that.find('i.fa').removeClass('fa-caret-right').addClass('fa-caret-down');
              }
            });
          });
          $('.kitim-contact-list > li').on('click', function (e) {
            stope(e);
            console.log($(this));
          });
          $('.kitim-contact-tabs').find('li').on('click', function (e) {
            stope(e);
            var _that = $(this);
            _that.addClass('kitim-this').siblings().removeClass('kitim-this');
            var event = _that.attr('kitim-event');
            $('.kitim-contact-' + event).addClass('kitim-show')
              .siblings('div')
              .removeClass('kitim-show');
          });
          console.log($('.kitim-header-tools').find('.kitim-item'));
          $('.kitim-header-tools').find('.kitim-item').each(function () {
            var _that = $(this);
            _that.on('click', function (e) {
              console.log('ccc');
              stope(e);
              _that.addClass('kitim-this').siblings().removeClass('kitim-this');
              var event = _that.attr('kitim-event');

              $('.kitim-' + event).addClass('kitim-show')
                .siblings('div')
                .removeClass('kitim-show');
            });
          });
        },
        full: function (layero) {
          winChange(layero);
        },
        restore: function (layero) {
          winChange(layero);
          layero.find('.kitim-header-tools').show();
        },
        min: function (layero) {
          layero.find('.kitim-header-tools').hide();
        }
      });

      layer.open({
        skin: 'kitim-tips',
        title: false,
        closeBtn: false,
        shade: false,
        // offset: 'rb',
        offset: ['100px', '50px'],
        content: '<div class="kitim-tips-main"><i class="fa fa-comments" aria-hidden="true"></i></div>',
        type: 1
      });

      $(window).on('resize', function () {
        winChange($('#IM-main'));
      });
      // $(window).resize();
    });
  </script>
</body>

</html>